<template>
    <div class="container">
        <el-container style="height: 100%">
            <el-header>
                <Header></Header>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <Aside></Aside>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
            <el-footer>
                <Footer></Footer>
            </el-footer>
        </el-container>

    </div>
</template>
<script>
import Header from './Header.vue'
import Aside from './Aside.vue'
import Main from './Main.vue';
import Footer from './Footer.vue';
// import RouterViewer from 
export default {
    name: 'Index',
    components: {
        Header, Aside, Main, Footer
    },
    mixins: [],
    props: {
        msg: String
    },
    data() {
        return {

        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {

    },
    methods: {

    }
};
</script>
<style  scoped>
.el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;

}

body>.el-container {
    margin-bottom: 40px;
}

.container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>